import React from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { fetchCount, syncAdd } from '../storeNoToolkit/counterAction';

function TestNoToolkit() {
  const { value, loading, error } = useSelector((state) => state);
  const dispatch = useDispatch();

  // 场景 A：不等待 async thunk（异步在后台执行）
  const handleFireAndForget = () => {
    dispatch(fetchCount(5));    // 触发异步（1s 后会 +5）
    dispatch(syncAdd(10));      // 立即同步 +10
    // 最终：先 +10，1s后再 +5
  };

  // 场景 B：等待 thunk 完成后再处理（比如需要拿结果或串行逻辑）
  const handleAwait = async () => {
    try {
      const result = await dispatch(fetchCount(3)); // dispatch 返回 Promise（因为 thunk 是 async 并 return ）
      console.log("fetchCount 返回的结果：", result); // result === 3
      // 可以基于 result 做后续操作
    } catch (err) {
      console.error("请求失败：", err);
    }
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>手写 thunk 示例</h1>
      <p>value: {value}</p>
      <p>loading: {String(loading)}</p>
      <p>error: {error ? String(error) : "null"}</p>

      <button onClick={handleFireAndForget}>触发异步(fetchCount 5) 并立即 syncAdd(10)</button>
      <button onClick={() => dispatch(syncAdd(1))}>同步 +1（直接 dispatch）</button>
      <button onClick={handleAwait}>等待异步(fetchCount 3) 完成</button>
    </div>
  );
}

export default TestNoToolkit
